html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; outline: 0; border: 0; background: transparent; vertical-align: baseline; font-size: 100%; }

html { overflow-y: scroll; height: 100%; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; }
body { margin: 0 auto; padding: 0em 0em 10em; width: 64em; color: #111; font: normal 1em/1.5 Arial, "Helvetica Neue", Arial, Helvetica, sans-serif; }

article, aside, figure, figcaption, footer, header, nav, section { display: block; }
h1, h2, h3, h4, p, ul, ol, dl, pre, address, table, form, hr, figure, audio, video { margin-bottom: 1.5em; }



/* TYPOGRAPHY
------------------------------------------------------------------------------------------------ */

h1 { margin-bottom: .5em; font-weight: normal; font-size: 3em; line-height: 1.15; }
h2 { margin-bottom: .75em; font-weight: normal; font-size: 1.6875em; line-height: 1.25; }
h3 { margin-bottom: 1em; font-weight: normal; font-size: 1.5em; line-height: 1.25; }
h4 { font-weight: bold; font-size: 1em; line-height:1.3em; }
h5 { margin:2em 0 1em 0; text-transform: uppercase; font-weight:normal; }

a, :focus { outline: 0; }

a { color: #333; text-decoration: none; }
a:visited { color: #333; text-decoration: none; }
a:hover { color: #333; text-decoration: underline; }
a:active { color: #333; text-decoration: underline; }

a img { border: 0 none; }

strong, b { font-weight: bold; }
small { font-size: .875em; }
strike, del { text-decoration: line-through; }

pre, code, kbd, samp { font-size: .875em; font-family: Consolas, "Lucida Console", Monaco, monospace; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
mark { padding: 1px 3px; background: #ffc; }

blockquote { margin-bottom: 1.5em; padding: 1.125em 1.5em 1px; border-left: 2px solid #07f; font-style: italic; }

hr { display: block; margin: 0 0 2em 0; height: 0; border: 0 none; border-top: 1px solid #CCC; }

ul { margin-left: 2em; list-style: square outside; }
ul ul { margin-bottom: 0; }

ol { margin-left: 2em; list-style: decimal outside; }
ol ol { margin-bottom: 0; }


/* FORMS
------------------------------------------------------------------------------------------------ */

fieldset > div { margin-bottom: 1.5em; }

label, .label { display: block; cursor: pointer; }

input, select, textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: inherit; vertical-align: baseline; font-weight: inherit; font-size: inherit; font-family: inherit; }
input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=file], textarea { display: block; margin: 0; padding: 0em; width: 100%; border: 1px solid #b7b7b7; border-radius: 0; background: #fff; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .25) inset; -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .25) inset; box-shadow:0 1px 2px rgba(0, 0, 0, .25) inset; line-height:1; -webkit-appearance: none; }
input[type=checkbox], input[type=radio] { margin: 0; padding: 0; }
select { cursor: pointer; }
textarea { overflow: auto; vertical-align: top; }

button, .btn { display: inline-block; overflow: visible; margin: 0; padding: .75em 2em; width: auto; border:0; background: #2b5225; color: #FFF; vertical-align: baseline; text-align: center; text-transform: uppercase; font-weight: bold; font-size: .875em; font-family: inherit; line-height: normal; cursor: pointer; }
button:hover, .btn:hover { background: #386b30; }
button:active, .btn:active { background: #386b30; }

.helptext { display: block; font-size: .75em; }

/* Firefox Fix */
button::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=button]::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=file] > input[type=button]::-moz-focus-inner { margin: 0; padding: 0; border: 0; }

/* WebKit Fix */
input[type=search], input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
[placeholder]:focus::-webkit-input-placeholder { color: transparent; }

/* iOS7 Fix - some inputs collapse when empty */
input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=file] { height: 2em; }



/* MEDIA
------------------------------------------------------------------------------------------------ */

img { -ms-interpolation-mode: bicubic; }
img, object, embed { display: block; max-width: 100%; width: auto; width: auto\9; /* IE Fix */ height: auto; border: 0; vertical-align: middle; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }

/* Disable max-width for Google Map images */
#map_canvas img, .google-maps img { max-width: none; }



/* TABLES
------------------------------------------------------------------------------------------------ */

table { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; border-spacing: 0; border-collapse: collapse; }

colgroup { border: 1px solid #111; }

th, td { padding: .5em; color: inherit; vertical-align: top; text-align: left; font-weight: normal; font-family: inherit; }

thead th { font-weight: bold; }
tbody th { font-weight: bold; }
tbody td {  }
tbody td[colspan] { text-align: center; }
tfoot td { color: #777; }



/* HELPER CLASSES
------------------------------------------------------------------------------------------------ */

.left { float:left !important; }
.right { float:right !important; }
.normal { font-weight:normal !important; }

.cf:before, .cf:after { display:table; content:""; }
.cf:after, .clear { clear:both; }


/* FLEXSLIDER ANPASSUNGEN
------------------------------------------------------------------------------------------------ */

.flexslider { border:0; }
.flex-direction-nav a  { position: absolute; top: 50%; z-index: 10; display: block; overflow: hidden; margin: -40px 0 0; width: 77px; height: 81px; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flexslider:hover .flex-prev { left: 0; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.flexslider:hover .flex-next { right: 0; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.flex-direction-nav a:before  { width:77px; height:81px; background:url(../images/arrowLeft.png); content: ''; }
.flex-direction-nav a.flex-next:before  { width:77px; height:81px; background:url(../images/arrowRight.png); content: ''; }

.slider { margin: 0 0 .75em !important;}
#carousel li {margin-right: 5px;}
#carousel img {display: block; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; cursor: pointer;}
#carousel img:hover {opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
#carousel .flex-active-slide img {opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; cursor: default;}

/* FLEXROWS
------------------------------------------------------------------------------------------------ */

.flexrow { margin-left: -1.5em; padding-left: 4px; }

[class^="col"] { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: .5em; margin-left:-4px; padding-left:8px; width: 100%; border-left: 0em solid transparent; vertical-align: top; }



/* MODUL: HEADER (Masthead)
------------------------------------------------------------------------------------------------ */

.masthead { margin-bottom:1.25em; }
.masthead .inner { display:block; padding-top:1em; height:5.75em; background:url(../images/headBG.png); }

a.logo img { display:block; margin:0 auto; }

.masthead nav ul { margin:.9em 0 0 0; text-align:center; }
.masthead nav ul li { display:inline-block; text-align:center; }
.masthead nav ul li a { display:inline-block; padding:0 1.25em; color:#00401b; text-align:center; font-size:1.0625em;  }
.masthead nav ul li.active a { font-weight:bold; }



/* MODUL: NAVIGATION
------------------------------------------------------------------------------------------------ */

.mainnav ul { margin: 1.5em 0; list-style: none; }
.mainnav li { display: inline; }

.mainnav a {  }
.mainnav a:hover {  }
.mainnav a:active {  }

#fruit-nav { padding-left:2.5em; }
#fruit-nav input[type=checkbox] + label { display:inline-block; }
#fruit-nav h4 { margin-bottom:0; }
#fruit-nav .toggleAll, #fruit-nav .toggleNone { display:block; color:#999; cursor:pointer; }
#fruit-nav .toggleAll:hover, #fruit-nav .toggleNone:hover { color:#111; }
#fruit-nav .toggleNone { margin-bottom:1em; }
#fruit-nav div span { display:block; }
#fruit-nav div + h4 { margin-top:3em; }

/* MODUL: MAIN
------------------------------------------------------------------------------------------------ */

.main { padding-bottom:5em; }
.main > h5, .main > section > h5 { margin-right:3em; margin-left:3em; }
.main > h3, .main > section > h3 { margin-right:2em; margin-left:2em; }
.main > p, .main > section > p { margin-right:3em; margin-left:3em; }
.main > ul, .main > section > ul { margin-right:3em; margin-left:4em; }
.main > img, .main > section > img { margin: 1em auto 2em auto; }
.main > img.left, .main > section > img.left, .main > a > img.left, .main > section > a > img.left { margin:0 1em 1em 3em; }
.main > img.right, .main > section > img.right, .main > a > img.right, .main > section > a > img.right  { margin:0 3em 1em 1em; }
.main > img.fixedWidth, .main > section > img.fixedWidth, .main > a > img.fixedWidth, .main > section > a > img.fixedWidth { margin: 0 0 1em !important; }

aside { float:right; width:35%; }
aside + section { width:65%; }
aside img { margin:0 auto; }

.homepage .col1_3 p { text-align:center; }
.homepage .col1_3 p a { display:block; }

fieldset div label { width:15%; line-height:2em; }
fieldset div { margin-bottom:.5em; border-left:0; }
fieldset .col1_2 { position:relative; left:4px; padding-left:0; border-left:0 transparent solid; }
fieldset .col1_2.spacing { border-left:0px transparent solid; }
fieldset .col1_2 label { width:39.5%; }
fieldset .col1_2 input[type=text] { padding:0 .5em; width:50%;}
fieldset textarea {padding:.25em;}

/* Module */

.teaser { margin-top:0; }
.teaser.overlay-link p a { width:auto; }
.teaser img { margin:0 auto 1em auto; }
.teaser p { margin:0 auto; text-align:center;}
.teaser p a { display:block; margin:0 auto; width:8em; }

.juicefinder { margin-top:3em; }
.fruits .flexrow { padding-bottom:1em; background:url(../images/justForLayout/gras2.jpg) repeat-x bottom; }
.fruits .flexrow .col1_5 { text-align:center; }
.fruits .flexrow .col1_5.inactive { opacity:.25; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; }
.fruits .flexrow .col1_5 a { color:#333; }
.fruits .flexrow .col1_5 img { margin:0 auto; }
.fruits .flexrow .col1_5 small { display:inline-block; margin-top:2em; height:4.5em; }


/* --- Unternehmen --- */

#stage { position:relative; z-index:10; overflow: hidden; margin:2em 0 0 0; -webkit-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 2px 6px rgba(0, 0, 0, .75); -moz-box-shadow:0 2px 6px rgba(0, 0, 0, .75); box-shadow:0 2px 6px rgba(0, 0, 0, .75);  }
#stage li { display:none; }
#stage li.active { display:block; }
#stage li img { float:left; margin-right:1.5em; }
#stage div { padding:2em; }
#stage h3 { padding-top:1em; }
#stage p { padding-right:1em; font-size:.9em;text-align:center; }
#stage h4 { margin:0 0 .5em 0; padding:2em 0 0 0; text-transform:uppercase; text-align:center; }

#stage-navigation { z-index:5; }
#stage-navigation span { margin-left:1.5em; text-transform: uppercase; line-height:1.5;}
#stage-navigation ul { display:inline-block; border-bottom:#d5e2c6 1px solid; -webkit-box-shadow: 0 1px 2px #e4f1e4; -moz-box-shadow: 0 1px 2px #e4f1e4; box-shadow: 0 1px 2px #e4f1e4; }
#stage-navigation ul li { display:inline-block; margin:0; padding:.5em 1.73em;

background: #e7f3e6;
background: -moz-linear-gradient(left,  #e7f3e6 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ecf2ed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #e7f3e6 0%,#ffffff 100%);
background: -o-linear-gradient(left,  #e7f3e6 0%,#ffffff 100%);
background: -ms-linear-gradient(left,  #e7f3e6 0%,#ffffff 100%);
background: linear-gradient(to right,  #e7f3e6 0%,#ffffff 100%);
list-style-type: none; font-size: .9375em;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f3e6', endColorstr='#ffffff',GradientType=1 );
cursor:pointer;
}
#stage-navigation ul li.active { display:inline-block; background:#EEE;

background: #003f1c;
background: -moz-linear-gradient(top,  #003f1c 0%, #0a7539 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003f1c), color-stop(100%,#0a7539));
background: -webkit-linear-gradient(top,  #003f1c 0%,#0a7539 100%);
background: -o-linear-gradient(top,  #003f1c 0%,#0a7539 100%);
background: -ms-linear-gradient(top,  #003f1c 0%,#0a7539 100%);
background: linear-gradient(to bottom,  #003f1c 0%,#0a7539 100%);
color:#FFF;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f1c', endColorstr='#0a7539',GradientType=0 );
cursor:pointer;
}

.ie8 #stage { border:#CCC 1px solid; }

a.back { float:right; margin:0 0 5em 0; padding:0 2em; background:#2b5225; color:#FFF; line-height:2em; }



/* --- Diverses --- */

.visual { -webkit-box-shadow:0 2px 6px rgba(0, 0, 0, .75); -moz-box-shadow:0 2px 6px rgba(0, 0, 0, .75); box-shadow:0 2px 6px rgba(0, 0, 0, .75); }
.visual div { display:table-cell; height:100%; vertical-align: middle; }
.visual p { display:block; margin:0 2em; width:28%; vertical-align: middle; font-size: 1.5em; }
.visual + p { margin-top:2em; }


.detail { position: relative; height:36.25em; background:url(../images/gras.jpg) repeat-x bottom; }
.detail .pack { position:absolute; bottom:1em; left:1em; }
.detail .fruit { position:absolute; right:5em; bottom:1em; }
.detail .description { margin-left:14em; }
.detail h2 { margin:0; padding:2em 0 0 0;}
.detail h2 span { text-transform: uppercase; }
.detail h2 + p { margin:0; }
.detail h2 + p + p { margin:0; }
.detail p { margin:0; padding:0; width:80%; }
.detail .nutrition { margin: 1em 0 0 14em; }
.detail .nutrition { display:inline-block; color:#333; vertical-align: middle; vertical-align: middle; line-height:33px; }
.detail .allergiker { margin-top:.6em; }
.detail .allergic + p { margin-bottom:0; }
.detail .nutrition span, .detail .allergic span { display:inline-block; margin:-.45em .5em 0 0; padding:0; width:33px; height:33px; background:url(../images/badge-small.png) no-repeat; vertical-align: middle; }
.detail .allergic { margin: 0 0 1em 0; }
.detail h2 + p { padding-bottom:1em; }

/* TODO: 44px -> EM */
.detail ul { margin:0; padding:0; }
.detail ul li { margin:0; padding:0; list-style-type: none; }

.detail p { margin:1em 0 0 0; }
.detail .deco { position:absolute; right:5em; bottom:1em; width:19.5em; height:19.5em; }

.overlay { position: absolute; top:10px; right:10px; display:none; width:34em; background:#dfe8e1; -webkit-box-shadow:0 2px 6px rgba(0, 0, 0, .75); -moz-box-shadow:0 2px 6px rgba(0, 0, 0, .75); box-shadow:0 2px 6px rgba(0, 0, 0, .75); opacity:.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; }
.overlay.center { top:0; left:50%; bottom:0; margin:auto 0 auto -3em; height:34em; }
.overlay .close { height:17px; background:#333; cursor:pointer; }
.overlay .close span { float:right; margin:3px; width:11px; height:11px; background:url(../images/close.png) no-repeat;  }

.overlay .text { overflow:auto; margin:1em; height:88%; }

.overlay #zutaten, .detail .overlay #allergiker { display:none; }
.overlay p { display:inline-block; margin-left:1.5em; }
.overlay table { margin:.25em 0 1em 1.5em; width:90%; }
.overlay table td { padding:.3em 0; border-bottom: 1px solid #111; text-align:left; font-size:.9em; }
.overlay table tr:last-child td { border-bottom:0; }
.overlay .r { width:30%; text-align:right; }
.overlay .checkbox { width:6%; border:0; text-align:center; }
.overlay img { display:inline !important; float:none; margin:0; width:21px; height:21px; }
.overlay #allergiker small { display:block; padding:0 1.8em 1.8em 1.8em; }
.overlay .download { margin-left:1.5em; }

.overlay.center + p { margin-top:30px; }

.contact { margin:2em -5em 0 3em; }
.contact button { clear:both; }
.error { color:#CC2200; }
.error input, .error textarea { border:#CC2200 1px solid; }
p.success { padding:0 2em; background:#2b5225; color:#FFF; text-align:center; line-height:2em; }

#sitemap { margin:0 3em; }
#sitemap .topelement { display:block; margin:2em 0 0 0; padding:0 .5em; line-height:2.5em; }
#sitemap .topelement a { margin-right:1.8em; font-size:.9em; }
#sitemap .topelement a:first-child { display:block; margin:0 -.5em .5em -.5em; padding:0 .5em; border-bottom:#CCC 1px solid; font-size:1.1111em; }

.newsletter-signup, .newsletter-signout { display:block; margin-left:3em; }
#newsletter-signup-block, #newsletter-signout-block { display:none; margin-left:3em; }
#newsletter-signup-block label, #newsletter-signout-block label {  width:30%; }
#newsletter-signup-block span label {  width:5em; }
#newsletter-signup-block input[type=text], #newsletter-signout-block input[type=text] {  width:60%; }
#newsletter-signup-block button, #newsletter-signout-block button { position:relative; left:-.3em; margin-left:0; }
.success { margin:1em 0 1em 3em;  background:#00401b; color:#FFF; padding:.5em; text-align:center; border-radius:4px; }
.error { margin:1em 0 1em 3em; }
.error + .newsletter-signup + #newsletter-signup-block { display:block; }
#newsletter-signup-block .error { margin-left:0; }

.open-more { display:block; margin:0 0 2em 3em; }
.more-box { margin:0 3em 3em 3em; display:none; }


.close-more { margin:0 0 2em 0; }

/* MODUL: FOOTER (Contentinfo)
------------------------------------------------------------------------------------------------ */

footer[role=contentinfo] { clear:both; border-top:#CCC 1px solid; }
footer[role=contentinfo] nav { float:right; margin-top:.5em; font-size:.8em; }
footer[role=contentinfo] nav a { text-transform:uppercase; font-size:inherit; }

/* TODO: an den richtigen Orten einpflegen:; */

[class^="col"] { width: 50%; }

.col1_6 { width: 16.6667%; }
.col1_5 { width: 20%; }
.col1_4 { width: 25%; }
.col1_3 { width: 33.3334%; }
.col2_5 { width: 40%; }
.col1_2 { width: 50%; }
.col3_5 { width: 60%; }
.col2_3 { width: 66.6667%; }
.col3_4 { width: 75%; }
.col1_1 { width: 100%; }

.flexform .label, .flexform label { display: inline-block; padding-right: 2%; width: 18.4%; }
.flexform label.autowidth { width: auto; }

.flexform input[type=text], .flexform input[type=password], .flexform input[type=search], .flexform input[type=email], .flexform input[type=url], .flexform input[type=tel], .flexform input[type=date], .flexform input[type=time], .flexform input[type=number], .flexform input[type=file], .flexform textarea { display: inline-block; margin-left: -4px; padding:.5em; width: 75.2%; }
.flexform button, .flexform span.helptext { margin-left: 20.5%;  }




/*
===================================================================================================
M E D I A   Q U E R I E S   >   Print Styles
===================================================================================================
*/

@media print {



* { background: transparent !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; color: black !important; text-shadow: none !important; opacity: 1 !important; -ms-filter: none !important; filter: none !important; }

@page { margin: 2cm; }

h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
p, h1, h2, h3, h4, h5, h6 { orphans: 3; widows: 3; }

ul { padding: 0 1em; list-style: disc inside; }
ol { padding: 0 1em; list-style: decimal inside; }

a, a:visited { color: black !important; text-decoration: underline; }

img { page-break-inside: avoid; }

}